<template>
  <div>
    <div @click="applynewadd()">
      <slot>
        <el-button type="primary">{{ title }}</el-button>
      </slot>
    </div>
    <MyDialog
      :title="title"
      :visible.sync="addSwitch"
      size="large"
      @beforeClose="close_add"
    >
      <div v-loading="detailLoading" style="margin-top: 20px">
        <el-form
          ref="elForm"
          class="addFrom"
          :model="queryParam"
          :rules="rules"
          label-width="100px"
        >
          <el-row :gutter="40" type="flex">
            <el-col :span="12">
              <el-form-item label="数据ID:" prop="id">
                <el-input
                  v-model="queryParam.id"
                  maxlength="30"
                  style="width: 100%"
                  clearable
                  placeholder="请输入"
                >
                  <span slot="suffix"></span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文档名称:" prop="name">
                <el-input
                  v-model="queryParam.name"
                  maxlength="30"
                  style="width: 100%"
                  clearable
                  placeholder="请输入"
                >
                  <span slot="suffix"></span>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40" type="flex">
            <el-col :span="24">
              <el-form-item label="归档路径:" prop="path">
                <el-cascader
                  v-model="queryParam.path"
                  :options="options"
                  style="width: 100%"
                  :props="{
                    checkStrictly: true,
                    emitPath: false,
                    value: 'id',
                    label: 'name',
                    children: 'childList',
                  }"
                  clearable
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="40" type="flex">
            <el-col :span="12">
              <el-form-item label="文件类型:" prop="type">
                <el-select
                  v-model="queryParam.type"
                  :disabled="type == 'look'"
                  style="width: 100%"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in firstFileTypeList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文件类型2:" prop="type">
                <el-select
                  v-model="queryParam.type"
                  :disabled="type == 'look'"
                  style="width: 100%"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in secondFileTypeList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40" type="flex">
            <el-col :span="12">
              <el-form-item label="来源:" prop="form">
                <el-select
                  v-model="queryParam.form"
                  :disabled="type == 'look'"
                  style="width: 100%"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in sourceList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40" type="flex">
            <el-col :span="12">
              <el-form-item label="系统标识:" prop="system">
                <el-select
                  v-model="queryParam.system"
                  :disabled="type == 'look'"
                  style="width: 100%"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in firstSystemList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="系统标识2:" prop="system">
                <el-select
                  v-model="queryParam.system"
                  :disabled="type == 'look'"
                  style="width: 100%"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in secondSystemList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40" type="flex">
            <el-col :span="12">
              <el-form-item label="签章选择:" prop="file">
                <el-select
                  v-model="queryParam.file"
                  :disabled="type == 'look'"
                  style="width: 100%"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in unitList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template slot="footer">
        <el-button type="primary" :loading="loading" @click="submit_apply">
          保 存
        </el-button>
        <el-button @click="close_add">取 消</el-button>
      </template>
    </MyDialog>
  </div>
</template>
<script>
  import MyDialog from '@/components/Dialog'
  import {
    durgCategoryList,
    addDurg,
    updateDurg,
    durgUnitList,
  } from '@/api/interHospital/drug.js'
  import { autoRule, depCategoryList, selData } from '@/api/dep/index.js'
  export default {
    components: {
      MyDialog,
    },
    data () {
      return {
        unitList: [],
        queryParam: {
          id: '',
          name: '',
          path: '',
          type: '',
          form: '',
          system: '',
          file: '',
        },
        addSwitch: false,
        loading: false,
        uploadList: false,
        rules: {
          path: [{ required: true, message: '请选择', trigger: 'change' }],
          id: [{ required: true, message: '请输入', trigger: 'blur' }],
          name: [{ required: true, message: '请输入', trigger: 'blur' }],
          type: [{ required: true, message: '请选择', trigger: 'change' }],
          form: [{ required: true, message: '请选择', trigger: 'change' }],
          system: [{ required: true, message: '请选择', trigger: 'change' }],
          file: [{ required: true, message: '请选择', trigger: 'change' }],
        },
        editId: '',
        detailLoading: false,
        type: '',
        title: '档案设置',
        options: [],
        firstFileTypeList: [
          { id: 1, name: '缴费凭证' },
          { id: 2, name: '检验报告' },
          { id: 3, name: '入院证明' },
          { id: 4, name: '出院证明' },
          { id: 5, name: '诊断证明' },
          { id: 6, name: '出院结算单' },
        ],
        secondFileTypeList: [
          { id: 1, name: '挂号' },
          { id: 2, name: '检查' },
          { id: 3, name: '医嘱' },
          { id: 4, name: '理疗' },
          { id: 5, name: '护理' },
          { id: 6, name: '预缴' },
        ],
        sourceList: [
          { id: 1, name: 'his传入' },
          { id: 2, name: '签章' },
          { id: 3, name: '手动导入' },
          { id: 4, name: '自助机' },
        ],
        firstSystemList: [
          { id: 1, name: 'his传入' },
          { id: 2, name: 'CA' },
          { id: 3, name: '外来' },
        ],
        secondSystemList: [
          { id: 1, name: '防伪' },
          { id: 2, name: '签名' },
          { id: 3, name: '签章' },
        ],
      }
    },
    computed: {},
    watch: {},
    created () {},
    methods: {
      async applynewadd (item, type) {
        await Promise.allSettled([this.getList(), this.getUnitList()])
        this.addSwitch = true
        this.uploadList = false
        this.loading = false
        this.type = ''
        if (item) {
          this.editId = item.id
          this.type = type
          let { categoryId, drugName, specifications, unit } = item
          categoryId = categoryId ? categoryId.split(',') : ''
          categoryId = categoryId ? categoryId.map((item) => Number(item)) : ''
          Object.assign(this.queryParam, {
            categoryId,
            drugName,
            specifications,
            unit,
          })
        }
      },
      async getList () {
        let data = await depCategoryList()
        this.options = data.result
      },

      async getUnitList () {
        let data = await selData()
        this.unitList = data.result
      },
      submit_apply () {
        this.$refs['elForm'].validate(async (valid) => {
          if (valid) {
            this.$confirm('是否继续此操作?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            })
              .then(async () => {
                try {
                  this.uploadList = true
                  this.loading = true
                  let params = { ...this.queryParam }
                  params.categoryId = params.categoryId
                    ? params.categoryId.join(',')
                    : ''
                  if (this.editId) {
                    params.id = this.editId
                    await updateDurg(params)
                  } else {
                    await addDurg(params)
                  }
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                  })
                  setTimeout(() => {
                    this.close_add()
                  }, 500)
                } catch (error) {
                  this.loading = false
                }
              })
              .catch(() => {})
          } else {
            return false
          }
        })
      },

      close_add () {
        this.$refs['elForm'].resetFields()
        this.$nextTick(() => {
          if (this.uploadList) {
            this.$emit('load')
          }
          this.addSwitch = false
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .addFrom {
    width: 100%;
    overflow: hidden;
  }

  .df-end {
    display: flex;
    justify-content: flex-end;
  }

  .upload-box {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c0ccda;
    cursor: pointer;
  }

  .live-style-item {
    float: right;
    color: #8492a6;
    font-size: 13px;
    max-width: 200px;
  }

  .bind-box {
    padding: 0 0 20px;
  }

  .bind-box-table {
    padding: 0 0 20px;
  }

  .footer {
    text-align: center;
    padding: 10px 0 45px;

    & > :nth-child(n + 2) {
      margin-left: 14px;
    }

    button {
      width: 106px;
      height: 48px;
    }
  }
</style>
